


Ao3 Skin - Make the buttons flat

by ElectricAlice



Series: CSS code scripts for Ao3 [4]
Category: Archive of Our Own
Genre: Fanwork Research & Reference Guides, Light Mode, ao3 skin, dark mode - Freeform, site skin
Language: English
Status: Completed
Published: 2021-03-19
Updated: 2021-03-19
Packaged: 2021-03-28 13:00:34
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 396
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/30139926
Author URL: https://archiveofourown.org/users/ElectricAlice/pseuds/ElectricAlice
Summary: A skin for Archiveofourown.org that addsflat buttonsand flattens a few of the 3d elements.It will work with most of the skins you have, it does work with reversi!
Series: CSS code scripts for Ao3 [4]
Series URL: https://archiveofourown.org/series/1940026
Kudos: 1
Collections: HTML & CSS stuffs





	Ao3 Skin - Make the buttons flat

**Author's Note:**

> In the comment of my other web skin some people said that they like flat buttons more than the 3d ones on the website, so I decided to make this quick skin to do that. it should be easy to add a parent skin as well so you can change the colors the way you want.
> 
> It does flatten a few other details and remove shadows here and there.  
> It **doesn't** flatten things like checkboxes and radio. sorry, maybe I'll update that in the future but for now they are the base ones.
> 
> [Rebloggable post on tumblr if you care to share](https://electricalice.tumblr.com/post/646103504942956544/flat-buttons-for-ao3-in-the-comments-of-my)

This is how buttons look on default skin:

  


This is how buttons look on reversi:

And this is how buttons look on Snow Blue:

## Where is the code

The [Repository is here](https://github.com/electricalice/Ao3-flat-buttons). The code for the skin is 'flat-buttons.css'

## How to add a skin to your AO3 account

  * Make sure you're logged in your account on AO3 
  * go to **my dashboard** and then click on **Skins** (in the menu on the right) 
  * click on the button **create new skin**
  * Make sure Type is **Site Skin**
  * Add a Title to your skin 
  * Select and *Copy ALL the code you'll find in [here](https://github.com/electricalice/Ao3-flat-buttons/blob/main/flat-buttons.css)* 
  * Paste the code **in the field 'CSS'**
  * click **SUBMIT**
  * scroll to the bottom on the page and click on "USE" 



**Now you have a new skin! It is now linked to your account, so every time you log into ao3 from whatever device you'll have it already set!**

## How to add parent skins

If you, for example, use reversi as a skin, you can have flat buttons too. 

  * Make sure you're logged in your account on AO3 
  * go to **my dashboard** and then click on **Skins** (in the menu on the right) 
  * find **the skin you just created** and click on **Edit** (the skin is probably the top one) 
  * Scroll down and click on **advanced, show**
  * Then scroll down and click on **Add parent skin**
  * **type your skin in the autocomplete and select it!** (Reversi? Snow Blue? Another skin you've created to block works? ) 
  * click on **update**



## How to have colored buttons

The skin uses the default colors of the parent skin you are using (so, chances are, that they are gray-ish)

If you want to add colored buttons you just copy-paste this code at the beginning of the css of your skin:
    
    
      button, .actions a, .actions a:link, .action, input[type="submit"], .actions a:visited {
      color: #ffffff; /*this is the color of the text*/
      background-color: #900900; /*this is the background color*/
    }
    

  


Substitute the `#ffffff` and `#6badb3` with the HEX color of your choice! 

Make sure to choose 2 colors that provide a decent contrast for reading!

You can find [a hex color picker simply on a google search](https://www.google.com/search?q=hex+color+picker&oq=hex+color).

## How to remove the skin

  * Make sure you're logged in your account on AO3 
  * go to 'my dashboard' and then click on 'Skins' (n the menu' on the right) 
  * click on 'revert to default skin' 




End file.
